﻿@using WebAppModel
@{
    Layout = null;
   UserScanQRInfoModel user= Session["user"] as UserScanQRInfoModel;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Content/Script/jquery.min.js"></script>
    <title>手机验证</title>
    
    <style>
        .isNoPublic {
            height: 1.4rem;
            width: 11.25rem;
            margin: 0 auto;
            font-size: .7rem;
            color: #fff;
            text-align: center;
            line-height: 1.4rem;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
           background: url(https://shnbbucket.oss-cn-beijing.aliyuncs.com/20180315233216.png) no-repeat;
            background-size: 100%;
        }
        * {
            padding: 0;
            margin: 0;
            cursor: pointer;
        }

        #content {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #LoadingBar {
            position: absolute;
            background-color: rgba(0,0,0,.85);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }


        .phone {
            width: 90%;
            height: 100%;
            padding: 0 5%;
        }

            .phone > p:nth-child(1) {
                color: #E29F7B;
                padding-top: 10px;
                font-size: 18px;
            }

            .phone > p:nth-child(2) {
                color: #E29F7B;
                margin: 5px 0 10px;
            }

            .phone .phone-num {
                display: flex;
                align-items: center;
                background-color: white;
                border-radius: 3px;
                margin-bottom: 10px;
            }

                .phone .phone-num > span {
                    padding: 5px;
                }

                .phone .phone-num > input {
                    border: none;
                    width: 100%;
                    border-radius: 3px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 18px;
                }

            .phone .sure {
                display: block;
                text-decoration: none;
                background-color: #FFCC00;
                text-align: center;
                height: 40px;
                color: #763401;
                line-height: 40px;
                border-radius: 4px;
                margin: 20px auto;
                font-size: 18px;
            }

            .phone .user-info {
                border: 1px solid #d7d7d7;
                border-radius: 6px;
                width: 100%;
                height: 120px;
                overflow: hidden;
            }

                .phone .user-info > ul {
                    margin: 0;
                    padding: 0;
                }

                    .phone .user-info > ul > li {
                        display: flex;
                        padding: 10px 0;
                        align-items: center;
                    }

                        .phone .user-info > ul > li > img {
                            width: 35px;
                            height: 35px;
                            border-radius: 40px;
                            margin-left: 10px;
                        }

                        .phone .user-info > ul > li > span {
                            color: white;
                        }


                            .phone .user-info > ul > li > span:nth-child(2) {
                                width: 60px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
        .pageTitle {
        display:none;
        }
    </style>

    
</head>
<body id="content">
    <div class="isNoPublic">
        活动尚未发布，当前仅供预览！
    </div>
    <div id="LoadingBar">
        <img src="~/Content/Images/redpack/loading.gif" />
    </div>
    @*<div class="phone">
        <p>验证手机号：</p>
        <p>为确保您的红包准确到账，请验证手机号码。</p>
        <div class="phone-num">
            <span>+86</span>
            <input style="flex:1" id="phoneNum" type="text" placeholder="请填写手机号码" autofocus="">
        </div>
        <div class="phone-num">
            <input style="width:60%;padding-left:5px;" type="text" placeholder="请输入短信验证码" autofocus="" id="SMS">
            <input type="button" id="GetSMS" style="color: #826A50;width:40%;" value="获取验证码">
        </div>
        <a class="sure" id="PhoneSure" > 确定 </a>
        <div class="user-info">
            <ul class="roll"></ul>
        </div>
    </div>*@
</body>
</html>
<script src="~/Scripts/base64.js"></script>
<script>
    var aId = "@ViewBag.Aid";//模板Id
    $.ajax({
        url: "VerificationHtml",
        data: { aId: aId },
        type: "post",
        success: function (res) {
         
            var html = decode(res);
        
            $("#content").append(html);
           
            $('title').text($('.pageTitle > span').text());
            $('.pageTitle').remove();
        }
    });

</script>


<script>

    function DateFormat(val) {
        var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
        //月份为0-11，所以+1，月份小于10时补个0
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var dd = date.getFullYear() + "-" + month + "-" + currentDate;
        return dd;
    }

    //中奖信息滚动
    ; (function ($) {
        $.fn.scrollTop = function (options) {
            var defaults = {
                speed: 30
            };
            var opts = $.extend(defaults, options);
            this.each(function () {
                var $timer;
                var scroll_top = 0;
                var obj = $(this);
                var $height = obj.find("ul").height();
                obj.find("ul").clone().appendTo(obj);
                obj.hover(function () {
                    //clearInterval($timer);
                }, function () {
                    $timer = setInterval(function () {
                        scroll_top++;
                        if (scroll_top > $height) {
                            scroll_top = 0;
                        }
                        obj.find("ul").first().css("margin-top", -scroll_top);
                    }, opts.speed);
                }).trigger("mouseleave");
            })
        }
    })(jQuery);

    $(function () {
        function DateFormat(val) {
            var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
            //月份为0-11，所以+1，月份小于10时补个0
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var dd = date.getFullYear() + "-" + month + "-" + currentDate;
            return dd;
        }
        getInfo();
        var num = /^1[1-9]\d{9}$/;

        $('#content').on('click', '#GetSMS', function () {
            var that = this;
            var str = $(this).parent().prev().children('input').val();
            if (!num.test(str)) {
                alert('请输入正确的手机号码');
            }
            else {
                $(this).attr('disabled', 'disabled');
                var Num = 30;
                //倒计时
                time();
                function time() {
                    Num--;
                    if (Num > 0) {
                        $(that).val(Num + '秒后重发');
                        setTimeout(function () {
                            time();
                        }, 1000);
                    }
                    else {
                        $(that).val('获取验证码');
                        $(that).removeAttr('disabled');
                    }
                }

                //发送验证码给手机
                SendSMS(str, SMS);
                function SendSMS(str, smsStr) {
                    $.ajax({
                        url: "/app/WebTemplate/SMSApi",
                        type: "GET",
                        async: false,
                        data: {
                            phoneNum: str 
                        },
                        success: function (SMS) {
                          //  SMS发送到手机的验证码
                           //  判断验证码是否正确
                            $('#content').on('click', '#PhoneSure', function () {
                                if ($("#SMS").val() == SMS) {
                                
                                    getPhone(str);//给该手机的用户发奖品
                                }
                                else {
                                    alert("请检查验证码!");
                                }
                            })
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $.L.msgError(XMLHttpRequest.status);
                            $.L.msgError(XMLHttpRequest.readyState);
                            $.L.msgError(textStatus);
                        }
                    });
                }
            }
        })
    
            function getPhone(num) {
                //跳转到领奖纪录
               // alert("当前页面为预览，不能实际领取奖项");
                location.href = "GetFinished?aId=" + aId + '&denomination=' +' @ViewBag.Denomination'+"&time="+'@ViewBag.Time';
            }
          
        //名字太长取前两位 加**
        function NameEncrypt(str) {
            return str <= 2 ? str + "**" : str.substring(0, 2) + "**";
        }

        //获取中奖名单滚动数据
        function getInfo() {
            $.ajax({
                type: "get",
                url: '/app/PreView/GetTheWinningList',
                success: function (data) {
                    $('.user-info > ul').html('');
                    if (data.PageData.length == 0) {
                        $('.user-info > ul').append('<li style="margin-top:30px;color:#BFBFBF;justify-content:center;">暂无用户中奖</li>');
                    }
                    else {
                        $(data.PageData).each(function (i, ele) {
                            var e = '<li><img src=' + ele.HeadImgUrl + ' alt="null"><span style="margin-left: 10px">' + NameEncrypt(decode(ele.Nickname)) + ' </span><span  style="flex: 1;text-align:center;">' + DateFormat(ele.Time) + '</span><span style="margin-right: 10px">' + ele.Denomination + '元 </span></li>';
                            $('.user-info > ul').append(e);
                        })
                        if (data.PageData.length > 3) {
                            $(".user-info").scrollTop({
                                speed: 40,//数值越大 速度越慢
                            });
                        }

                    }

                },
                error: function (r) {
                    alert(r.status)
                }
            });
        }
    });
    function initPage() {

        var objLoading = document.getElementById("LoadingBar");
        if (objLoading != null) {
            objLoading.style.display = "none";
        }
    }
    initPage();
    
</script>